<template>
  <el-main>
    <el-row>
      <el-col :span="24" v-loading="loading" element-loading-text="AI正在飞快解析中">
        <el-form :model="ruleForm" :rule=rules ref="ruleForm" class="demo-ruleForm">
          <el-form-item label="您的称呼" required>
            <el-input v-model="ruleForm.nickname" :style="{width: '120px'}" placeholder="不需要真实姓名"></el-input>&nbsp;
            <el-select v-model="ruleForm.sex" allow-create filterable clearable placeholder="请选择"
                       :style="{width: '80px'}">
              <el-option label="先生" value="男"></el-option>
              <el-option label="女士" value="女"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="工作年限" required>
            <el-input-number v-model="ruleForm.experience" :step="1" :min="0"></el-input-number>&nbsp;&nbsp;&nbsp;<span>年龄</span>&nbsp;&nbsp;&nbsp;
            <el-input-number v-model="ruleForm.age" :step="1" :min="0" required></el-input-number>
          </el-form-item>
          <el-form-item required>
            <template #label>
              <span>您的<font color="red">学历</font></span>
              <i class="el-icon-user"></i>
            </template>
            <el-select v-model="ruleForm.degree" placeholder="请选择学历" allow-create filterable clearable
                       :style="{width: '150px'}">
              <el-option label="统本" value="统本"></el-option>
              <el-option label="函授本科" value="函授本科"></el-option>
              <el-option label="民本" value="民本"></el-option>
              <el-option label="大专" value="大专"></el-option>
              <el-option label="专升本" value="专升本"></el-option>
              <el-option label="硕士" value="硕士"></el-option>
              <el-option label="博士" value="博士"></el-option>
              <el-option label="海归" value="海归"></el-option>
            </el-select>

            &nbsp;&nbsp;&nbsp;<span>专业</span>&nbsp;&nbsp;&nbsp;
            <el-input v-model="ruleForm.speciality" :style="{width: '150px'}" placeholder="您的专业"></el-input>&nbsp;
          </el-form-item>

          <el-form-item required>
            <template #label>
              工作<font color="red">城市</font>
            </template>
            <el-select v-model="ruleForm.city" placeholder="请选择工作城市" filterable allow-create :style="{width: '150px'}"
                       prop="city">
              <el-option-group
                  v-for="group in options"
                  :key="group.label"
                  :label="group.label">
                <el-option
                    v-for="item in group.options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-option-group>
            </el-select>
            &nbsp;&nbsp;&nbsp;岗位&nbsp;&nbsp;&nbsp;
            <el-select v-model="ruleForm.level" placeholder="请选择岗位级别" filterable clearable allow-create
                       :style="{width: '150px'}">
              <el-option label="初级" value="初级"></el-option>
              <el-option label="初中级" value="初中级"></el-option>
              <el-option label="中级" value="中级"></el-option>
              <el-option label="中高级" value="中高级"></el-option>
              <el-option label="高级" value="高级"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="测试方向" required>
            <tr>
              <el-checkbox-group v-model="ruleForm.testjob" :style="{width: '400px'}">
                <el-checkbox label="功能测试" name="context" :style="{width: '55px'}"></el-checkbox>
                <el-checkbox label="接口测试" name="context" :style="{width: '55px'}"></el-checkbox>
                <el-checkbox label="APP测试" name="context" :style="{width: '55px'}"></el-checkbox>
                <el-checkbox label="自动化测试" name="context" :style="{width: '65px'}"></el-checkbox>
                <el-checkbox label="性能测试" name="context" :style="{width: '55px'}"></el-checkbox>
                <el-checkbox label="安全测试" name="context" :style="{width: '55px'}"></el-checkbox>
                <el-checkbox label="测试开发" name="context" :style="{width: '55px'}"></el-checkbox>
                <el-checkbox label="管理工作" name="context" :style="{width: '55px'}"></el-checkbox>
                <!--                <el-checkbox label="管理方向" name="context"></el-checkbox>-->
                <el-checkbox label="管理方向" name="context" v-show="false"></el-checkbox>
              </el-checkbox-group>
            </tr>
            <tr>
              <el-input type="textarea" v-model="ruleForm.desc" placeholder="大厂/外包公司, 工作中具体工作和角色"
                        :style="{width: '400px'}"></el-input>
              <div class="blink-img" v-if="dialogVisible"><img src="../assets/1710298782218.jpg" width="50"
                                                               height="30"/>{{ evaluationResult }}
              </div>
            </tr>
          </el-form-item>

          <el-form-item required>
            <template #label>
              <span><font color="red">收入情况</font></span>
            </template>
            <el-select v-model="ruleForm.company_size" placeholder="外包/非外包" allow-create filterable clearable
                       :style="{width: '120px'}">
              <el-option label="外包" value="外包"></el-option>
              <el-option label="大厂" value="大厂"></el-option>
              <el-option label="中厂" value="中厂"></el-option>
              <el-option label="小公司" value="小公司"></el-option>
              <el-option label="外企" value="外企"></el-option>
              <el-option label="国企" value="国企"></el-option>
            </el-select>&nbsp;
            <font color="red">月薪</font>:&nbsp;
            <el-input v-model="ruleForm.income_monthly" :style="{width: '50px'}" placeholder="月薪"
                      prop="income_monthly"></el-input> &nbsp;k&nbsp;&nbsp;
            <font color="red">年终奖</font>:&nbsp;
            <el-input v-model="ruleForm.income_year" :style="{width: '70px'}" placeholder="年终奖"></el-input> &nbsp;k&nbsp;&nbsp;
            <el-button type="danger" v-on:click="evaluation" round>薪资PK</el-button>
          </el-form-item>
          <table style="border: 2px dashed black;">
            &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <font color="red">生活压力/动力</font>
            <el-form-item required>
              <font color="red">是否婚姻</font>:&nbsp;
              <el-select v-model="ruleForm.married" placeholder="是否结婚" filterable clearable allow-create
                         :style="{width: '150px'}">
                <el-option label="已经婚" value="已经婚"></el-option>
                <el-option label="未结婚" value="未结婚"></el-option>
              </el-select>&nbsp;
              有无需要抚养小孩:&nbsp;
              <el-select v-model="ruleForm.child" placeholder="无" filterable clearable allow-create
                         :style="{width: '100px'}">
                <el-option label="无" value="无"></el-option>
                <el-option label="1个" value="1个"></el-option>
                <el-option label="2个" value="2个"></el-option>
                <el-option label="3个" value="3个"></el-option>
                <el-option label="更多" value="未结婚"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item required>
              &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;房贷:&nbsp;&nbsp;
              <el-input v-model="ruleForm.mortgage" :style="{width: '150px'}"></el-input>&nbsp;
              &nbsp;房租&nbsp;
              <el-input v-model="ruleForm.rent" :style="{width: '80px'}"></el-input>&nbsp;
              <span style="color: red">生活开销</span>&nbsp;
              <el-input v-model="ruleForm.other" :style="{width: '100px'}"></el-input>
            </el-form-item>
          </table>

          <table style="border: 2px dashed black;margin-top: 10px;border-color: brown">
            &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <font color="red">工作遇到问题和建议</font>
            <el-form-item required>
              <tr>
                <font color="red">离职/在职&nbsp;</font>:&nbsp;
                <el-select v-model="ruleForm.onjob" placeholder="是否在职" filterable clearable allow-create
                           :style="{width: '120px'}">
                  <el-option label="在职" value="在职"></el-option>
                  <el-option label="离职" value="离职"></el-option>
                </el-select>&nbsp;
                失业多久:&nbsp;
                <el-input v-model="ruleForm.unemployment_time" :style="{width: '80px'}"></el-input>&nbsp;
                离职原因:&nbsp;
                <el-input v-model="ruleForm.reason" :style="{width: '150px'}" placeholder=""></el-input>&nbsp;
              </tr>
            </el-form-item>

            <el-form-item required>
              <tr>
                <span><font color="red">期望薪资</font></span>:&nbsp;&nbsp;&nbsp;
                <el-input v-model="ruleForm.salary_expectation" :style="{width: '120px'}" placeholder=""></el-input>&nbsp;
                &nbsp;稳定性:&nbsp;&nbsp;&nbsp;
                <el-input v-model="ruleForm.job_frequency" :style="{width: '120px'}" placeholder="5年跳3家"></el-input>&nbsp;
              </tr>
              <tr>
                领导关系:&nbsp;&nbsp;&nbsp;
                <el-select :style="{width: '120px'}" v-model="ruleForm.leadership" filterable clearable allow-create
                           placeholder="管理路线">
                  <el-option label="沟通障碍" value="沟通障碍"></el-option>
                  <el-option label="一般" value="一般"></el-option>
                  <el-option label="良好" value="良好"></el-option>
                </el-select>
                <!--                <span>工作强度:</span>&nbsp;-->
                <!--                <el-input :style="{width: '100px'}" placeholder="很忙" v-model="ruleForm.intensity"></el-input>&nbsp;-->
                <span>&nbsp;&nbsp;职业规划:</span>&nbsp;
                <el-input :style="{width: '300px'}" v-model="ruleForm.plan" placeholder="管理路线/技术路线"></el-input>&nbsp;
              </tr>
              <tr>
                <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;建议&nbsp;&nbsp;</span>&nbsp;
                <el-input :style="{width: '300px'}" v-model="ruleForm.suggest"></el-input>&nbsp;
              </tr>
            </el-form-item>
          </table>
          <el-form-item>
            <el-button type="primary" @click="submitForm()" style="margin-top: 10px;margin-left:200px">保存</el-button>
            <el-button @click="resetForm()" style="margin-top: 10px;">重置</el-button>
          </el-form-item>
        </el-form>
      </el-col>

    </el-row>
  </el-main>
</template>

<style>
.el-main {
  background-color: #C7EDCC; /* 将 '#f0f0f0' 替换为你想要的颜色值 */
  margin-left: 30px
}

.el-form-item {
  margin-bottom: 5px; /* 自定义间距大小，这里仅为示例，可以换成你所需的像素值或者单位 */
  font-size: 14px;
}

.el-form-item__label {
  font-size: 14px;
}

.blink-img {
  /*animation: blink 30s infinite;*/
  color: red;
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
</style>

<script>
import axios from 'axios'

export default {
  name: "dou-yin",
  data() {
    return {
      web_url: 'http://59.36.173.55:18000/user/',
      //web_url: 'http://localhost:8000/user/',
      loading: false,
      show_salary: false,
      salary: "",
      checkedList: [],
      checked: false,
      dialogVisible: false,
      evaluationResult: '',
      ruleForm: {
        nickname: '',
        speciality: '',
        sex: '女士',
        testjob: [],
        desc: '',
        age: 26,
        city: '',
        degree: '',
        experience: 3,
        income_monthly: '',
        income_year: '',
        married: '',
        company_size: '',
        child: '',
        leader: "沟通障碍",
        mortgage: "",
        rent: '',
        unemployment_time: '',
        reason: '',
        other: '',
        onjob: '',
        salary_expectation: '',
        job_frequency: '',
        leadership: '',
        intensity: '',
        suggest: '',
        plan: ''
      },
      options: [{
        label: '热门城市',
        options: [
          {
            level: 1,
            value: '北京',
            label: '北京'
          }, {
            level: 1,
            value: '上海',
            label: '上海'
          },
          {
            level: 1,
            value: '广州',
            label: '广州'
          },
          {
            level: 1,
            value: '深圳',
            label: '深圳'
          }
        ]
      }, {
        label: '较热城市',
        options: [
          {
            level: 2,
            value: '南京',
            label: '南京'
          },
          {
            level: 2,
            value: '苏州',
            label: '苏州'
          },
          {
            level: 2,
            value: '成都',
            label: '成都'
          }, {
            level: 2,
            value: '广州',
            label: '广州'
          }, {
            level: 2,
            value: '大连',
            label: '大连'
          },
          {
            level: 2,
            value: '武汉',
            label: '武汉'
          }]
      }],
      rules: {
        city: [
          {required: true, message: '请选择城市', trigger: 'change'}
        ],
        income_monthly: [
          [
            {required: true, message: '薪资不能为空', trigger: 'blur'},
            {type: 'number', message: '薪资必须为数字值', trigger: 'blur'}
          ]
        ]

      }
    };
  },
  methods: {
    resetForm() {
      const init_form = {
        nickname: '',
        speciality: '',
        sex: '女士',
        testjob: [],
        desc: '',
        age: 26,
        city: '',
        degree: '',
        experience: 3,
        income_monthly: '',
        income_year: '',
        married: '',
        company_size: '',
        child: '',
        leader: "沟通障碍",
        mortgage: "",
        rent: '',
        unemployment_time: '',
        reason: '',
        other: '',
        onjob: '',
        salary_expectation: '',
        job_frequency: '',
        leadership: '',
        intensity: '',
        suggest: '',
        plan: ''
      }
      this.ruleForm = init_form
      this.dialogVisible=false
    },
    evaluation() {
      if (this.ruleForm.city == '' || this.ruleForm.city == undefined) {
        this.$message.error('城市不能为空');
        return
      }
      if (this.ruleForm.age == '' || this.ruleForm.age == undefined) {
        this.$message.error('年龄不能为空');
        return
      }
      if (this.ruleForm.income_monthly == '' || this.ruleForm.income_monthly == undefined) {
        this.$message.error('月薪不能为空');
        return
      }
      let rule = {
        'income': this.ruleForm.income_monthly,
        'age': this.ruleForm.age,
        'city': this.ruleForm.city
      }
      axios.post(this.web_url + 'evaluation/', rule, {
        headers: {
          'Content-Type': 'application/json' // 指定 Content-Type 为 JSON
        }
      }).then((response) => {
        //this.loading = false
        this.dialogVisible = true
        console.log(response)
        this.evaluationResult = response.data
        console.log('Post Response:', response);
      }).catch((error) => {
        //this.loading = false
        this.dialogVisible = true
        this.evaluationResult = '服务器出现问题，请重试'
        console.error('Post Error:', error);
      });
    },
    submitForm() {
      this.loading = true
      axios.post(this.web_url, this.ruleForm, {
        headers: {
          'Content-Type': 'application/json' // 指定 Content-Type 为 JSON
        }
      }).then((response) => {
        this.loading = false
        console.log('Post Response:', response);
      }).catch((error) => {
        this.loading = false
        console.error('Post Error:', error);
      });
    },
    handleQuantityChange(item) {
      console.log('Quantity for', item.label, 'has changed to', item.quantity);
    },
    handleClose() {

    }
  }
}
</script>

